import { useEffect, useState, useRef } from 'react'
// import { useLocation } from 'react-router-dom'
import './index.scss'
function Head(props) {
    // const history = useLocation()
    const head = useRef(null)
    const [scroll, usescroll] = useState(0)
    const [headHieght, useheadHieght] = useState(0)
    const handleScroll = (e) => {
        console.log(e.srcElement.scrollingElement.scrollTop)
        usescroll(e.srcElement.scrollingElement.scrollTop)
    }
    useEffect(() => {
        console.log(props)
        window.addEventListener('scroll', handleScroll)
        useheadHieght(head.current.clientHeight)
    }, [head])
    return (
        <div>
            <div ref={head} className="ali-c jus-b component-head">
                <div>{scroll}</div>
                <div>123</div>
                <div>123</div>
            </div>
            <div className={`component-head-options ali-c jus-b ${scroll > headHieght + 20 ? 'fixed' : ''}`}>
                <div>{scroll}</div>
                <div>123</div>
                <div>123</div>
            </div>
        </div>
    )
}

export default Head